<template>
  <div class="list-tab">
    <template v-for="(item, index) in tabs" :key="index">
      <div
        class="list-tab-item"
        @click="selectedTab(item)"
        :class="tabActive == item.value ? 'active' : ''"
      >
        {{ item.name }}
      </div>
    </template>
  </div>
</template>
  <script lang="ts">
export default {
  name: "list-tab",
};
</script>
  <script lang="ts" setup>
import { ref } from "vue";
import { enumType } from "@/types";

const props = withDefaults(
  defineProps<{
    tabs?: enumType;
    modelValue?: number | string;
  }>(),
  {
    tabs: () => {
      return [];
    },
    modelValue: "",
  }
);

const emit = defineEmits(["change", "update:modelValue"]);

const tabActive = ref<number | string>(props.modelValue);

const selectedTab = (item: { name: string; value: number | string }) => {
  tabActive.value = item.value;
  emit("change", item.value);
  emit("update:modelValue", item.value);
};
</script>

<style scoped>
.list-tab {
  display: flex;
}
.list-tab-item {
  line-height: 36px;
  padding: 0 30px;
  user-select: none;
  cursor: pointer;
  background-color: #f7f7f7;
  border-right: 1px solid #f7f7f7;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  font-size: 12px;
}
.list-tab-item:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.list-tab-item:last-child {
  border-right: 1px solid #ebeef5;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.list-tab-item.active {
  background: #ffffff;
  color: var(--base-default);
  border-top: 1px solid var(--base-default);
  border-bottom: 1px solid var(--base-default);
  border-left: 1px solid var(--base-default);
  border-right: 1px solid var(--base-default);
}
</style>